<template>
    <f7-page>
        <f7-navbar title="个人主页" back-link="返回">
            <f7-nav-right>
                <f7-link href="">设置</f7-link><f7-link>分享</f7-link>
            </f7-nav-right>
        </f7-navbar>

        <!-- <div>
            <div>
                <p>头像</p>
                <p v-if="driverInfo.user">用户名：{{driverInfo.user.real_name}}</p>
                <p v-if="driverInfo.transport" v-for="item in driverInfo.transport">运输：{{item.chn}}</p>
                <p>备注：</p>
            </div>
            <div>
                <span>货源：</span>
                <span>线路：</span>
            </div>
            <div>
                <span v-if="driverInfo.truck">车牌号：{{driverInfo.truck.number}}</span>
                <span v-if="driverInfo.truck">车辆类型：载重{{driverInfo.truck.weight}}吨</span>
                <span>长度：</span>
                <span v-if="driverInfo.count">路线：{{driverInfo.count.DRIVER_LINE}}</span>
            </div>
        </div> -->

        <div class="bg-personpage">
                <div class="text-align-center">
                      <img  class="companyhome-icon gap-20" src="../../assets/img/infor-face.png">
                        <h3 class="text-black" v-if="driverInfo.user">{{driverInfo.user.real_name}}</h3>

                         <h4 class="text-gray gap-10 line-height">
                                <span>采购:</span>
                                <span class="distance" v-if="driverInfo.transport" v-for="item in driverInfo.transport">{{item.chn}}</span>
                        </h4>
                         <p class="gap-20 text-gray">备注</p>
                </div>

                <div class="bg-companynpage">
                    <div  class="row row-homepage text-align-center text-gray gap-20" v-if="driverInfo.count">
                        <div  class="col text-orange">
                            <h4>货源</h4>
                            <h4  class="gap-5 ng-binding">{{driverInfo.count.traffic_driver_demand||0}}</h4>
                        </div>
                        <div class="col text-orange">
                                <h4 >线路</h4>
                                <h4 class="gap-5 ng-binding">{{driverInfo.count.DRIVER_LINE||0}}</h4>
                        </div>
                    </div>
                 </div>
                <div class="bg-companynpage">
                <div class="row row-homepage text-align-center text-gray gap-20" >
                        <div class="col">
                            <h4>  <img  class="driverdetail-car" src="../../assets/img/driver-car.png"></h4>
                            <h4 class="gap-5 ng-binding" v-if="driverInfo.truck">{{driverInfo.truck.number}}</h4>
                        </div>

                        <div class="col">
                            <h4>四桥</h4>
                            <h4 class="gap-5 ng-binding" v-if="driverInfo.truck">载重{{driverInfo.truck.weight}}吨</h4>
                        </div>
                          <div class="col">
                            <h4>长度</h4>
                            <h4 class="gap-5 ng-binding">6</h4>
                        </div>

                        <div class="col">
                            <h4>路线</h4>
                            <h4 class="gap-5 ng-binding" v-if="driverInfo.count">{{driverInfo.count.DRIVER_LINE}}</h4>
                        </div>
                    </div>
                </div>
       </div>


         <div>
                    <div class="gap-row gap-20">
                        <div class="list-inset text-align-center">
                            <img src="../../assets/img/car-img.png"  class="car-img" >
                        </div>
                    </div>
         </div>

       <f7-toolbar>
            <div class="row button-foot">
                <div class="col col-33">
                    <f7-link>加好友</f7-link>
                </div>
                <div class="col col-33">
                    <f7-link>打电话</f7-link>
                </div>
                <div class="col col-33" @click="sendMsg()">
                    <f7-link class="immediately">
                       发消息
                    </f7-link>
                </div>
            </div>
        </f7-toolbar>


    </f7-page>
</template>

<script>
    import F7Page from "framework7-vue/src/components/page";
    export default {
        name: "relationDrDtl",
        components: {F7Page},
        data(){
            return{
                driverInfo:''
            }
        },
        methods:{
            async driverBsDtls () {
                let param = {user_id: this.$f7Route.params.driverid,type:"TRAFFIC_DRIVER_PRIVATE"}
                this.driverInfo = (await this.AccountService.getPersonalPage(param)).data.data
            },
            sendMsg(){
                let param = {
                    userId: this.driverInfo.user._id,
                    userRole: this.driverInfo.user.role,
                    role: this.Storage.get('user').user.role
                }

                window.cordova.plugins.yimPlugin.chat(param.userId, 0, param.role, param.userRole, '0xA2A2F0', function (success) {
                    console.log('云信Chat成功', success)
                }, function () {
                    console.log('云信Chat失败')
                })
            }
        },
        mounted(){
            this.driverBsDtls ()
        }
    }
</script>

<style scoped>
.ios .page {
    background: #f5f5f5;
  }
.gap-20 {
    margin-top: 20px;
}
.gap-10 {
    margin-top: 10px;
}
.gap-5{
    margin-top: 5px;
}
.companyhome-icon {
    border: 2px solid #fff;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
}
.text-gray {
    color: #999;
}
.distance{
    margin: 0px 4px;
}
.driverdetail-car {
    width: 24px;
    height: 17px;
    vertical-align: top;
}
.gap-row {
    padding: 10px 0;
}
.list-inset {
    background: transparent;
    margin: 0 15px;
}
.car-img {
    width: 330px;
    height: 175px;
}
.row-homepage .col.text-orange .ng-binding{
    color: #E45102;
    font-weight: bold;
    font-size: 14px;
}
.ios .toolbar a.link {
    height: 44px;
    font-size: 14px;
    color: #999;
}
.immediately{
    color: #fff !important;
    background:#68b54b !important;
}
.button-foot{
  width: 100%;
  background: white;
}
.button-foot .col-33 {
    width: 33.333333333333%  !important;
  align-items: center;
  justify-content: center;
  color: #666;
  text-align: center;
  border-left: 1px solid #f5f5f5;
}
.col h4{
    font-size:13px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
</style>
